import React from 'react';
import styles from './index.module.css';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import Link from '@docusaurus/Link';
import { tabList } from './data';

export default function HomepageSections() {
  return (
    <section className={styles.features}>
      <div className="container" style={{ width: 'unset' }}>
        <Tabs>
          {tabList.map((tabItem) => (
            <TabItem value={tabItem.value} label={tabItem.label}>
              <ul>
                {tabItem.children.map((child) => (
                  <li>
                    <Link to={child.link}>{child.title}</Link>
                  </li>
                ))}
              </ul>
            </TabItem>
          ))}
        </Tabs>
      </div>
    </section>
  );
}